<template>
  <div class='app-container'>
    <div class='app-box'>
        <tabList :type='4'></tabList>
        <div>
             <div class="top"  style="width:300px;">
                <span>出单时间：</span>
                <el-date-picker
                    class='wd230'
                    size="mini"
                    value-format='yyyy-MM-dd'
                    v-model="time1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
             <div class="top1" >
                <span>保险公司：</span>
                <el-select  style="    width: 140px;" size="mini" v-model="insuranceId" placeholder="请选择保险公司" @change="changecomony(insuranceId)">
                    <el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
                        <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
                        </el-option>
                    </el-option-group>
                </el-select>
            </div>
            <div class="top1">
              <span>工&emsp;&emsp;号：</span>
              	<el-select  class="selects" size="mini"  style="width:140px;"  multiple v-model="staffId" placeholder="请选择适用工号">
                  <el-option class="selects" v-for="item in workoptions" :label="item.staffAccount" :value="item.id">
                  </el-option>
                </el-select>
            </div>
             <div class="top1">
                <span>所属机构：</span>
                <!-- <ztree-select class="wd210" v-model="organizationUnitId" :treedata="treeData" :childprops="childprops" @change='setSelectedId'></ztree-select> -->
                <el-select v-model="organizationUnitId" placeholder="请选择" size="mini" style="width:140px;" >
                  <el-option v-for="item in treeData" :key="item.organizationId" :label="item.organizationName" :value="item.organizationId">
                  </el-option>
                </el-select>
              </div>
           
            	
        </div>
        

        <div>
            <div class="top">
                <span>搜&emsp;&emsp;索：</span>
              <el-input v-model="keyword" class="selects" style="width:230px;" size="mini" placeholder="请输入保单号"></el-input>
            </div>
             <div class="top1" style="float:right;width:auto;">
                <el-button size="mini" type='primary' style="width:80px;" @click="tosearch">搜索</el-button>
                <el-button size="mini" type='primary' style="width:80px;">导出</el-button>
            </div>
        </div>

        <div class="table">
             <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                prop="date"
                label="收款机构"
                >
                 <template slot-scope="scope">
                   <span v-if="scope.row.date">{{scope.row.date}}</span>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
                <el-table-column
                prop="date2"
                label="结算日期"
                width="160"
                align='right'>
                  <template slot-scope="scope">
                   <span v-if="scope.row.date2">{{scope.row.date2}}</span>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
                <el-table-column
                prop="date3"
                label="费用类型"
                width="90"
                align='right'>
                  <template slot-scope="scope">
                   <span v-if="scope.row.date3">{{scope.row.date3}}</span>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
                  <el-table-column
                prop="date4"
                label="结算金额"
                width="120"
                align='right'>
                  <template slot-scope="scope">
                   <span v-if="scope.row.date4">{{scope.row.date4}}</span>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
                <el-table-column
                prop="date5"
                label="保单号"
                width="190"
                align='right'>
                 <template slot-scope="scope">
    
                     	<span class="all type1 all_equally" v-if="scope.row.guaranteeSlipTypeQuery==2">
												<img src="../../../assets/images/icon-jiaoqiang.png" />
											</span>
											<span class="all type2 all_equally" v-if="scope.row.guaranteeSlipTypeQuery==1">
												<img src="../../../assets/images/icon-shangye.png" />
											</span>
											<span class="all type3 all_equally" v-if="scope.row.guaranteeSlipTypeQuery==3">
												<img src="../../../assets/images/icon-pidan.png" />
											</span>
           
                   <a @click="todetail(scope.row.date5)" v-if="scope.row.date5" class="alls" >{{scope.row.date5}}</a>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
                <el-table-column
                prop="date6"
                label="批单号" width="192" align='right'>
                  <template slot-scope="scope">
                   <a @click="topdetail(scope.row.date6)" v-if="scope.row.date6" class="alls" >{{scope.row.date6}}</a>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
                 <el-table-column
                 prop="date7"
                label="保险公司" width="120" align='right'>
                    <template slot-scope="scope">
                   <span v-if="scope.row.date7">{{scope.row.date7}}</span>
                   <span v-else>-</span>
                 </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
  </div>
</template>
<script>

import Vue from "vue";
import tabList from "@/components/billSettlement/tabList.vue";
export default {
   components: { tabList },
  data() {
    return {
        time1:'',
        insuranceId: "",
        companies: [],
        tableData: [
            {
                date: '石家庄分公司',
               date2: '2018-09-09 12:10:10',
               date3: '保单佣金',
               date4: '3,000.00',
               date5: '39749489389938728',
               date6: '39749489389938728-002',
               date7:'平安保险',
               guaranteeSlipTypeQuery:1
            }
        ],
        treeData: [],
        organizationUnitId:'',
        workoptions:[],
        staffId:'',
        keyword:'',
    }
  },
  filters: {
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    }
  },
  created() {
   
  },
  mounted(){
     if(this.$route.query.beginDate || this.$route.query.endDate){
            let arrR = [this.$route.query.beginDate,this.$route.query.endDate]
            this.time1 = arrR
        }
        if(this.$route.query.insuranceId){
            this.insuranceId = this.$route.query.insuranceId;
        }
          if(this.$route.query.organizationUnitId){
            this.organizationUnitId = this.$route.query.organizationUnitId;
        }
        if(this.$route.query.keyword){
            this.keyword = this.$route.query.keyword;
        }
        
        
       this.getCompanies();
       this.getUnits();
      this.getWorknumber(this.insuranceId)
  },
  methods: {
    changecomony(val) {
				this.getWorknumber(val)
				// this.getdatetype(val)
				this.staffId = []
			},
    getCompanies() {
      let that = this;
      let all = {
        letter: "",
        insurances: [{ insuranceName: "全部", id: "" }]
      };
      let params = {};
      this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
        console.log(rs);
        if (rs.success) {
          let result = rs.result.items;
          result.unshift(all);
          that.companies = result;
        }
      });
    },
      // 机构
    getUnits() {
      let params = {};
      let all = {
        organizationName: "全部所属机构",
        organizationId: ""
      };
      this.post(params, "services/app/common/ChildOrganizations").then(rs => {
        console.log(rs);
        if (rs.success) {
          rs.result.unshift(all);
          this.treeData = rs.result;
        }
      });
    },
    	//获取工号
			getWorknumber(val) {
				console.log(val)
				let params = {
					id: val
				};
				this.post(params, "services/app/common/GetCurrentStaffs").then(res => {
					console.log("num")
					console.log(res)
					this.workoptions = res.result.items
					for(var i = 0; i < this.workoptions.length; i++) {
						if(this.workoptions[i].describe != "") {
							this.workoptions[i].staffAccount = this.workoptions[i].staffAccount + " (" + this.workoptions[i].describe + ")"
						} else {
							this.workoptions[i].staffAccount = this.workoptions[i].staffAccount
						}

					}
				});
      },
      tosearch(){
          this.$router.push({
            name:"upbillSettlementlist",
            query:{
              insuranceId:this.insuranceId,
              beginDate:this.time1[0],
              endDate:this.time1[1],
              organizationUnitId:this.organizationUnitId,
              keyword:this.keyword
            }
        })
      },
      todetail(val){
         this.$router.push({
            name:"policydetail",
            params:{
             id:val
            }
        })
      },
      topdetail(val){
         this.$router.push({
            name:"policyonedetails",
            params:{
             id:val
            }
        })
      }
  }
};
</script>
<style lang="scss" scoped>
.app-box {
  color: #333;
    .switch-btn {
    color: #027dca;
    margin-left: 10px;
    cursor: pointer;
}
    .top {
        display: inline-block;
        width: 315px;
        margin-bottom: 15px;
    }
    .top1 {
        display: inline-block;
        width: 220px;
        margin-left: 10px
    }
  .unitbox {
    height: 40px;
    line-height: 40px;
    span {
      font-weight: 600;
    }
  }
  .table {
    margin-top: 30px;
    .alls{
        cursor: pointer;
      color: #027dca;
      font-weight: 700;
    }
    .alls:hover{
      text-decoration: underline
    }
  }
  .all_equally{
    display: inline-block;
    img{
      width: 23px;
    vertical-align: top;
    }
  }
  .list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
        margin-bottom:30px;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
}

</style>
